<template>
  <view class="checkbox-content">
    <view class="out-box">
      <view v-if="ruleForm[item.key]" class="tag-list">
        <view class="check-list" :style="{ width: 400 - item.label.length * 12 + 'rpx' }">
          <text>{{ ruleForm[item.key] }}</text>
          <!-- <text v-for="(tItem, tIndex) in ruleForm[item.key]" :key="tIndex">
            {{ tItem }}<text v-if="tIndex + 1 !== ruleForm[item.key].length">,</text>
          </text> -->
        </view>
        <view
          class="btn-text"
          round
          @click="clickReChoose(item)"
        >重新选择</view>
      </view>
      <view
        v-else
        class="btn-text"
        round
        @click="clickViewAllCheckbox(item)"
      >查看全部选项</view>
    </view>
    <you-popup
      :popupVisible="chooseDialog"
      :popupTitle="dialogTitle"
      @popupClose="chooseDialog = false"
      @cancel="chooseDialog = false"
      @confirm="clickSubmitChoose"
    >
      <view slot="popupContent">
        <view class="checkbox-group">
          <uni-data-checkbox
            :disabled="chooseItem.isDisabled || false"
            :localdata="chooseItem.options"
            selectedColor="#0b3f35"
            :multiple="true"
            v-model="checkbox[chooseItem.key]"
            @change="checkboxChange($event, chooseItem)"
          ></uni-data-checkbox>
        </view>
        <view class="al-check">
          <uni-data-checkbox
            :disabled="chooseItem.isDisabled || false"
            :localdata="[{ text: '全选', value: 'allChoose' }]"
            selectedColor="#0b3f35"
            :multiple="true"
            v-model="checkbox[`${chooseItem.key}All`]"
            @change="handleCheckAllChange($event, chooseItem)"
          ></uni-data-checkbox>
        </view>
        <view class="is-choose">
          <view class="title">已选择：</view>
          <view class="choose-item">
            <view v-for="(tItem, tIndex) in alChooseList" :key="tIndex" class="checkbox-tag">
              {{ tItem.text }}
              <uni-icons
                class="close-icon"
                type="close"
                color="#FFF"
                size="14"
                @click="closeTags(tItem.value, chooseItem)"
              ></uni-icons>
            </view>
          </view>
        </view>
      </view>
    </you-popup>
  </view>
</template>

<script>
  import YouPopup from '../../you-popup/index.vue'
  export default {
    name: 'CheckGroup',
    components: { YouPopup },
    data() {
      return {
        chooseDialog: false,
        dialogTitle: '',
        alChooseList: [], // 当前已经选择的列表
        chooseItem: null, // 当前操作的数据项
        checkbox: {}, // 存储当前选中的数据
      }
    },
    props: {
      item: {
        type: Object
      },
      ruleForm: { // 表单数据（接口返回）
        type: Object,
        default: {}
      }
    },
    watch: {
      item: {
        handler(newVal, oldVal) {
          this.getInitValue(newVal)
        },
        deep: true
      }
    },
    created() {
      this.getInitValue(this.item)
    },
    methods: {
      // 获取初始化数据
      getInitValue(item) {
        this.chooseItem = item
        this.alChooseList = []
        if (!this.ruleForm[item.key]) {
          this.checkbox[item.key] = []
          this.checkbox[`${item.key}All`] = []
          return
        }
        const checkboxList = item.options || []
        const chooseBoxList = []
        if (checkboxList.length === 0) return
        const formData = this.ruleForm[item.key].split(',')
        checkboxList.forEach(cItem => {
          if (formData.includes(cItem.value)) {
            this.alChooseList.push(cItem)
            chooseBoxList.push(cItem.value)
          }
        })
        this.checkbox[item.key] = chooseBoxList
        if (chooseBoxList.length == checkboxList.length) {
          this.checkbox[`${item.key}All`] = ['allChoose']
        }
      },
      // 弹窗复选框切换
      checkboxChange($event, item) {
        const data = $event.detail.value
        if (data && data.length) {
          this.checkbox[`${item.key}All`] = data.length === item.options.length ? ['allChoose'] : []
        }
        this.alChooseList = item.options.filter(cItem => data.includes(cItem.value))
      },
      // 全选切换
      handleCheckAllChange($event, item) {
        const data = $event.detail.value
        this.alChooseList = []
        if (data && data.length) {
          const checkList = item.options.map(cItem => {
            this.alChooseList.push(cItem)
            return cItem.value
          })
          this.checkbox[item.key] = checkList
          this.checkbox[`${item.key}All`] = ['allChoose']
        } else {
          this.checkbox[item.key] = []
          this.checkbox[`${item.key}All`] = []
        }
      },
      // 内部Tag删除
      closeTags(tag, item) {
        const newArr = []
        this.alChooseList.forEach(iItem => {
          if (iItem.value !== tag) {
            newArr.push(iItem.value)
          }
        })
        this.checkbox[item.key] = newArr
        const chooseBoxList = item.options.filter(item => {
          return newArr.includes(item.value)
        })
        this.alChooseList = uni.$u.deepClone(chooseBoxList)
        this.checkbox[`${item.key}All`] = chooseBoxList.length === item.options.length ? ['allChoose'] : []
      },
      // 查看内部数据
      clickViewAllCheckbox(item) {
        this.getInitValue(this.item)
        this.chooseItem = item
        this.dialogTitle = `请选择${item.label}`
        this.chooseDialog = true
        this.checkbox[item.key] = this.checkbox[item.key] || []
        this.chooseItem.chooseType = 'once'
      },
      // 确认按钮
      clickSubmitChoose() {
        const item = this.chooseItem
        this.ruleForm[item.key] = this.alChooseList.map(aItem => aItem.value).join(',')
        this.chooseDialog = false
        this.$emit('setRuleForm', this.ruleForm)
      },
      clickReChoose(item) {
        this.chooseItem = item
        this.dialogTitle = `请选择${item.label}`
        this.chooseItem.chooseType = 'replay'
        this.getInitValue(this.item)
        this.chooseDialog = true
      }
    }
  }
</script>

<style lang="scss" scoped>
  .btn-text {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-width: 120rpx;
    margin-left: 10rpx;
    font-size: 24rpx;
    color: #0b3f35;
  }
  .out-box {
    padding: 10rpx 20rpx;
    .tag-list {
      display: flex;
    }
    .check-list {
      height: 64rpx;
      text-align: right;
      line-height: 60rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .checkbox-tag {
    position: relative;
    height: 48rpx;
    line-height: 48rpx;
    padding: 0 20rpx;
    margin: 0 10rpx 10rpx 0;
    border-radius: 10rpx;
    color: #FFF;
    background-color: #0b3f35;
    .close-icon {
      position: absolute;
      right: -4rpx;
      top: -12rpx;
    }
  }
  .checkbox-group {
    padding: 10px 20rpx;
    width: 90%;
    max-height: 360rpx;
    margin: auto;
    background-color: #F7F7F7;
    border-radius: 8px;
    overflow-y: scroll;
  }
  .al-check {
    margin: 10rpx 0 0 30rpx;
  }
  .is-choose {
    height: 100%;
    margin: 20px 0 20px 0;
    padding: 0 20px 0 30px;
    border-left: 1px solid #EEE;
    .title {
      margin-bottom: 6px;
      font-size: 14px;
      font-weight: 400;
      color: #333333;
    }
    .choose-item {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      max-height: 140rpx;
      overflow-y: scroll;
    }
  }
</style>